<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 160px;
            border: 1px solid #999;
            padding: 8px;
        }
        
        .box img {
            width: 100%;
        }
    </style>
</head>

<!-- 

    上传文件：file
    <input type="file" />
    点击选中文件
    读取文件
    显示读取的文件
     
 -->
<div class="box">
    <img src="images/a1.png" alt="" class="img">
</div>
<input type='file' name="" id="inp" />

<body>
    <script>
        //触发事件 input事件 (input select)
        document.getElementById('inp').onchange = function() {
            //读取file文件   this.files File文件里面的API
            console.log(this.files);
            //获取刻度属性：sizes图片的大小 字节 name文件名字 type 类型
            // 读取文件 构造函数FileReader
            var myfile = new FileReader();
            //读取文件格式
            //读取图片文件
            myfile.readAsDataURL(this.files[0]);
            //读取文本格式
            //  myfile.readAsText(this.files[0]);

            myfile.onload = function() {
                //得到读取的结果 图片的base64码 图片的路径
                console.log(myfile.result);
                //显示
                document.querySelector('.img').setAttribute('src', myfile.result)
            }

        }
    </script>
</body>

</html>